<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<head>
    <title>visitOther</title>
    <%@ include file="static_res.jsp"%>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eO3kaKPN47DoTs6Z7xTyLuuIA36Vmrxw"></script>
    <link href="<%=path%>/res/css/userMenu.css" rel="stylesheet" type="text/css" />

<style>
    .bottom0 {
        margin-bottom: 0px;
    }
    .themeColor{
        font-weight: bold;
        font-size:22px;
        color:#EE6E87;
    }
    .bold{
        font-weight: bold;
    }
    .loct{
        width: 70px;
        height: 70px;
        padding: 3px;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        bottom: 90px;
        left: 50%;
        margin-left: -40px;
        position:absolute;z-index:1;
    }
    .lay{
        position:absolute;z-index:0;
    }
    .card .card-image .card-title {
        color: #fff;
        position: absolute;
        bottom: 45;
        padding: 60 0 30 93px;
    }
</style>
<script>

    $(function () {
        var curId = ${sessionScope.user.id};
        var join_list = ${currentActStatus};
        var focus_list = ${focusStatus};

        console.log(join_list);
        console.log(focus_list);
        console.log(${visitUserInfo.id});
        if ($.inArray(${visitUserInfo.id}, focus_list) != -1) {
            console.log("in ");
            $('#takeCare').text('已关注');
        }
        $.each( join_list, function(index, content){
            $('#joinIn'+content).addClass("disabled");
        });

        $("#takeCare").click(function () {
            if ($(this).text() == "关注")
            {
                var param = "curId=" +curId + "&careId=${visitUserInfo.id}";
                console.log(param);
                $.ajax({
                    type : "POST",
                    url : "<%=path%>/user/takeCare",
                    data : param,
                    dateType : "text",
                    success : function(result) {
                        if ("1" == result)
                        {
                            Materialize.toast('已关注 ！', 3000);
                            history.go(0);
                        }

                        else
                            Materialize.toast('未知错误 ！', 3000);
                    }
                });
            }
            else
            {
                if(confirm('确定要取消关注吗?'))
                {
                    var param = "curId=" +curId + "&careId=${visitUserInfo.id}";
                    $.ajax({
                        type : "POST",
                        url : "<%=path%>/user/closeCare",
                        data : param,
                        dateType : "text",
                        success : function(result) {
                            if ("1" == result)
                            {
                                Materialize.toast('已取关 ！', 3000);
                                history.go(0);
                            }

                            else
                                Materialize.toast('未知错误 ！', 3000);
                        }
                    });
                }
                return false;
            }
        });
    });
</script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="container">
    <%--3,9布局--%>
    <div class="row">
        <div class="col s3">
            <div class="row"></div>
            <div class="row"></div>
            <%--3.1 start--%>
            <div class="row bottom0">
                <div class="col s12">
                    <%--card--%>
                    <div class="card small hoverable z-depth-4">
                        <div class="card-image waves-effect lay waves-block waves-light">
                            <img class="activator" src="<%=path%>/res/img/2.jpg">
                            <span class="card-title activator ">${visitUserInfo.name}</span>
                        </div>
                        <div class="loct"><img src="<%=ipath%>${visitUserInfo.avatar}" width="70" height="70" class="circle"></div>
                        <div class="card-content">

                            <ul class="user_atten clearfix W_f18" >
                                <li class="S_line1">
                                    <a>
                                        <strong id="digit0">${care}</strong>
                                        <span class="S_txt2">关注</span>
                                    </a>
                                </li>
                                <li class="S_line1">
                                    <a>
                                        <strong id="digit1">${fans}</strong>
                                        <span class="S_txt2">粉丝</span>
                                    </a>
                                </li>
                                <li class="S_line1">
                                    <a>
                                        <strong id="digit2">${arts}</strong>
                                        <span class="S_txt2">游记</span>
                                    </a>
                                </li>
                            </ul>


                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4 flow-text">个人介绍<i class="material-icons right">close</i></span>
                            <blockquote>
                                ${visitUserInfo.intro}
                            </blockquote>

                        </div>

                    </div>
                </div>

            </div>
            <%--3.1 end--%>
            <div class="row">
                <div class="col s8 offset-s2">
                    <a id="takeCare" class="right waves-effect waves-light btn">关注</a>
                </div>

            </div>


        </div>

        <%--9 start--%>
        <div class="col s8 offset-s1">
            <div class="row"></div>
            <ul class="tabs">
                <li class="tab col s3"><a class="active" href="#uart">文章</a></li>
                <li class="tab col s3"><a class="active" href="#uact">活动</a></li>
                <li class="tab col s3"><a href="#uimg">图片</a></li>
                <li class="tab col s3"><a href="#umap">轨迹</a></li>
            </ul>
            <div id="uart" class="col s12">
                <c:forEach items="${visitArtPager.list}" var="art">
                    <div class = "row bottom0">
                        <div class="card horizontal hoverable col s12">
                            <div class="card-stacked">
                                <div class="card-content">
                                    <div class="card-title">${art.title}
                                        <span class="right">${art.createTime}</span>
                                    </div>
                                    <p class="truncate">${art.abst}</p>
                                </div>
                                <div class="card-action">
                                    <a href="<%=path%>/article/getArticle?aid=${art.id}">阅读全文</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </c:forEach>
                <div class = "row">
                    <ul class="pagination center ">
                        <li class="waves-effect "><a id="home" href="<%=path%>/article/articleInfo?pageNo=${1}" >首页</a></li>
                        <li class="waves-effect "><a id="pre" href="<%=path%>/article/articleInfo?pageNo=${visitArtPager.pageNo-1}">上一页</a></li>
                        <li class="waves-effect "><a href="#!">第${visitArtPager.pageNo}/${visitArtPager.pageTotal}页</a></li>
                        <li class="waves-effect "><a id="next" href="<%=path%>/article/articleInfo?pageNo=${visitArtPager.pageNo+1}" >下一页</a></li>
                        <li class="waves-effect "><a id="end" href="<%=path%>/article/articleInfo?pageNo=${visitArtPager.pageTotal}" >尾页</a></li>
                    </ul>
                </div>
            </div>
            <div id="uact" class="col s12">
                <c:forEach items="${visitAct}" var="act">
                    <div class="card horizontal hoverable">
                        <div class="card-stacked">
                            <div class="card-content">
                                <p class="flow-text">${act.title}</p>
                                创建人:<a href="<%=path%>/user/visitUser?uid=${act.uid}"><span class="bold">${act.createPerson}</span></a> |
                                当前人数:<span id="cur${act.id}" class="bold">${act.currentCount}</span> |
                                最大人数:<span class="bold">${act.maxCount}</span></p>
                                <p>${act.content}</p>
                                剩余<span class="themeColor">${act.leftDay}</span>天截止
                            </div>
                            <div class="card-action">
                                <a id="joinIn${act.id}" class="right waves-effect waves-light btn">加入</a>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <div id="uimg" class="col s12">
                测试 3
            </div>
            <div id="umap" class="col s12">
                <div id="mymap1"></div>

            </div>
        </div> <%--9 end--%>
    </div><%--3,9 row end--%>
</div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("mymap1");    // 创建Map实例
    map.centerAndZoom("南京",15);
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("南京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
</script>